<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页 </el-breadcrumb-item>>
            <el-breadcrumb-item>质量管理</el-breadcrumb-item>
            <el-breadcrumb-item>检测项测试</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->

        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryIndex" class="demo-form-inline">
            <el-form-item label="检测项编码">
                <el-input v-model="queryIndex.indexCode" placeholder="请输入检测项编码" clearable />
            </el-form-item>

            <el-form-item label="检测项名称">
                <el-input v-model="queryIndex.indexName" placeholder="请输入检测项名称" clearable />
            </el-form-item>


            <el-form-item label="检测项类型">
                <el-select v-model="queryIndex.indexType" placeholder="请选择检测项类型">
                    <el-option label="尺寸" value="尺寸" />
                    <el-option label="外观" value="外观" />
                    <el-option label="重量" value="重量" />
                    <el-option label="性能" value="性能" />
                    <el-option label="成分" value="成分" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadindex">搜索</el-button>
                <el-button @click="resettingindex">重置</el-button>

            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->
        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增" @click="this.addIndexDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon>新增</el-button>
            <el-button color="#b3e19d" @click="handlerEditIndex" title="修改" type="primary"><el-icon>
                    <EditPen />
                </el-icon>修改</el-button>

            <el-button color="#f89898" @click="handlerDeleteIndex" title="删除" type="primary"><el-icon>
                    <Delete />
                </el-icon>删除</el-button>
        </div>

        <!-- 表格 开始 -->
        <el-table ref="indexTable" :data="indexs" max-height="800px" :stripe="true" :border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column type="selection" width="55" />

            <el-table-column label="检测项编码" property="indexCode" />
            <el-table-column label="检测项名称" property="indexName" />
            <el-table-column label="检测项类型" property="indexType" />
            <el-table-column label="检测工具" property="qcTool" />

            <el-table-column width="330" align="center" label="操作">
                <template #default="scope">

                    <el-button size="small" @click="handleEdit(scope.row)"><el-icon>
                            <EditPen />
                        </el-icon>编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger"><el-icon>
                                    <Delete />
                                </el-icon>删除</el-button>
                        </template>
                    </el-popconfirm>


                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
        

        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="indexLimit" :pager-count="indexMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="indexTotal" />
        <!-- 分页栏结束 -->
        <!-- 添加检测的弹窗窗体开始-->
        <el-dialog v-model="addIndexDialogVisible" title="添加检测" width="600" align-center>
            <!-- 添加检测的表单 -->
            <el-form label-width="100px" :model="newIndex" style="max-width: 460px">
                <el-form-item label="检测项编码">
                    <el-input v-model="newIndex.indexCode" />
                    <el-switch @change="autoGenIndexCode" v-model="autoIndexCode" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </el-form-item>

                <el-form-item label="检测项名称">
                    <el-input v-model="newIndex.indexName" />
                </el-form-item>

                <el-form-item label="检测项类型">
                    <el-select v-model="newIndex.indexType" placeholder="请选择检测项类型">
                        <el-option label="尺寸" value="尺寸" />
                        <el-option label="外观" value="外观" />
                        <el-option label="重量" value="重量" />
                        <el-option label="性能" value="性能" />
                        <el-option label="成分" value="成分" />
                    </el-select>
                </el-form-item>

                <el-form-item label="检测工具">
                    <el-input v-model="newIndex.qcTool" />
                </el-form-item>


                <el-form-item label="备注">
                    <el-input v-model="newIndex.indexRemark" :rows="2" type="textarea" />
                </el-form-item>



            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddIndex">取消</el-button>
                    <el-button type="primary" @click="doAddIndex">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加缺陷的弹窗窗体结束-->

        <!-- 编辑缺陷的抽屉弹窗开始 -->

        <el-dialog v-model="indexEditDrawer" title="编辑检测" width="600" align-center>
            <template #header>
                <h4>编辑缺陷</h4>
            </template>
            <template #default>
                <div>
                    <!-- 编辑缺陷的表单 -->
                    <el-form label-width="100px" :model="editIndex" style="max-width: 460px">
                        <el-form-item label="检测项编码">
                            <el-input v-model="editIndex.indexCode" />
                            <el-switch @change="autoGenIndexCodes" v-model="autoIndexCodes" class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                        </el-form-item>


                        <el-form-item label="检测项名称">
                            <el-input v-model="editIndex.indexName" />
                        </el-form-item>



                        <el-form-item label="检测项类型">
                            <el-select v-model="editIndex.indexType" placeholder="请选择检测项类型">
                                <el-option label="尺寸" value="尺寸" />
                                <el-option label="外观" value="外观" />
                                <el-option label="重量" value="重量" />
                                <el-option label="性能" value="性能" />
                                <el-option label="成分" value="成分" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="检测工具">
                            <el-input v-model="editIndex.qcTool" />
                        </el-form-item>


                        <el-form-item label="备注">
                            <el-input v-model="editIndex.indexRemark" :rows="2" type="textarea" />
                        </el-form-item>




                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="doIndexEdit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑用户的抽屉弹窗结束 -->

    </div>
</template>

<script>
import indexRequst from '../../../api/index-api.js';
import genIdRequst from '../../../api/qcGenId-api.js';


export default {
    data() {
        return {
            queryIndex: {},//查询检测的对象
            indexs: [],//检测数据列表

           
            indexCurrPage: 1, // 字典分页的当前页码
            indexLimit: 10, // 字典分页的每页大小
            indexTotal: 0, // 字典列表的总条数
            indexMaxPage: 1,// 字典列表的最大页码

            addIndexDialogVisible: false,//新增检测
            newIndex: {},//封装检测
            autoIndexCode: false,//新增自动生成按钮
            newIndex: {
                indexCode: undefined
            },


            indexEditDrawer: false,//编辑检测窗口
            autoIndexCodes: false,//编辑自动按钮窗口
            editIndex: {},//封装检测
            editIndex: {
                indexCode: undefined
            }


        }

    },
    methods: {

        //新增自动生成编号
        autoGenIndexCode(val) {
            if (val) {
                genIdRequst.genIndexCode(res => {
                    this.newIndex.indexCode = res.data;
                });

            };


        },
        //编辑自动生成
        autoGenIndexCodes(val) {

            if (val) {
                genIdRequst.genIndexCode(res => {
                    this.editIndex.indexCode = res.data;
                });
            }
        },

        //工具栏-选中删除按钮事件
        handlerDeleteIndex() {
            // 获取表格对象
            let table = this.$refs.indexTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // console.log(selectionRows);
            // 可以进行批量改删除了
            //批量删除的第一件事
            //生产一个要删除的userId的数组
            let indexIds = [];

            //forEach 指的是从数组每一次取值是会赋值给user
            selectionRows.forEach(index => {
                // console.log(defect);
                indexIds.push(index.indexId);
            });
            console.log(indexIds);
            //调用API进行删除
            indexRequst.deletes(indexIds, res => {
                this.$message({
                    type: "success",
                    message: "成功删除" + res.msg + "条数据"
                });
                this.loadindex();

            });

        },
        //工具栏-选中编辑按钮事件
        handlerEditIndex() {
            // 获取表格对象
            let table = this.$refs.indexTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 获取第一行数据
            let row = selectionRows[0];
            // 调用行编辑事件
            this.handleEdit(row);


        },

        //行删除事件
        handleDelete(row) {

            indexRequst.delete(row.indexId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadindex();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })


        },

        // 行编辑按钮
        handleEdit(row) {
            // 通过id加载要编辑的用户信息
            indexRequst.get(row.indexId, res => {
                // 将查询的用户信息设置到editUser中
                this.editIndex = res.data;
                // 显示抽屉弹窗
                this.indexEditDrawer = true;
            });
        },

        //行编辑
        doIndexEdit() {
            this.autoIndexCodes = false;
            // 提交editIndex即可
            indexRequst.edit(this.editIndex, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.indexEditDrawer = false;
                    // 重新加载数据
                    this.loadindex();
                    // 将editIndex制空
                    this.editIndex = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '检测名称重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });

        },

        // 取消编辑操作
        cancelEdit() {

            // 将编辑的用户制空
            this.editIndex = {};
            // 关闭抽屉弹窗
            this.indexEditDrawer = false;
        },

        //新增按钮事件
        doAddIndex() {
            this.autoIndexCode = false;
            console.log(this.newIndex);
            indexRequst.save(this.newIndex, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addIndexDialogVisible = false;
                    // 重新加载数据
                    this.loadindex();
                    // 将newDefect制空
                    this.newIndex = {};

                } else if (res.code == '300') {
                    this.$message({
                        message: '缺陷描述重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },
        //取消添加按钮事件
        cancelAddIndex() {
            // 将newDefect制空
            this.newIndex = {};
            // 关闭窗体
            this.addIndexDialogVisible = false;
        },
        //缺陷列表的翻页函数
        changePage(value) {
            this.inedxCurrPage = value;
            this.loadindex();
        },

        // 加载缺陷数据
        loadindex() {
            indexRequst.list(this.inedxCurrPage, this.indexLimit,
                this.queryIndex, res => {
                    // 设置数据
                    this.indexs = res.data.list;
                    this.indexTotal = res.data.total;
                    this.indexMaxPage = res.data.pages;

                });

        },
        //重置操作
        resettingindex() {
            // 将queryIndex制空
            this.queryIndex = {};
            this.loadindex();

        },
    },
    mounted() {


        this.loadindex();//加载检测数据

    }
}


</script>